<template>
  <div class="container">
    <el-button type="primary" class="addAdmin" @click="addAdmin">增加管理员
    </el-button>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="openid" label="openid" width="280">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称">
      </el-table-column>
      <el-table-column prop="role" label="角色">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="adminEdit(scope)">修改</el-button>
          <el-popconfirm style="margin-left:10px" title="这是一段内容确定
删除吗？" @confirm="delAdmin(scope)">
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      total: 0
    }
  },
  created() {
    this.getAdminList()
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getAdminList()
    },
    //获取管理员
    getAdminList() {
      this.$http
        .get('/admGetAdmins', {
          params: {
            currentPage: this.currentPage,
            pagesize: this.pagesize
          }
        })
        .then(res => {
          //返回的数据在res.data中
          //console.log(res.data)
          if (res.data.status === 'success') {
            this.total = res.data.total
            this.tableData = res.data.result
          } else {
            this.$message.error('服务器错误')
          }
        })
        .catch(err => {
          console.log(err)
          this.$message.error('服务器错误')
        })
    },
    //修改
    adminEdit(scope) {
      //console.log(scope)
      const { row } = scope
      this.$router.push({
        name: 'AdminEdit',
        params: {
          action: 'edit',
          info: row
        }
      })
    },
    //删除
    delAdmin(scope) {
      const { _id } = scope.row
      this.$http
        .get('/delAdmin', {
          params: {
            _id
          }
        })
        .then(res => {
          if (res.data === 'success') {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(error => {
          this.$message.error('删除失败')
        })
      this.getAdminList()
    },
    //添加管理员
    addAdmin() {
      this.$router.push({
        name: 'AdminEdit'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
}
.addAdmin {
  display: flex;
  text-align: right;
  margin: 10px;
}
</style>
